<template>
  <inject-template :item="item" :pageId="pageId" :popId="popId" :isPropagation="false">
    <template v-slot:common>
      <div class="wb-flip-mc" ref="animateDom" v-html="flipText" :style="item.styles"></div>
    </template>
  </inject-template>
</template>

<script>
import InjectTemplate from '@/components/inject-template.vue'
import { utils } from '@/components/utils/utils'
import { ref } from 'vue'

export default {
  name: 'WbFlipMc',
  mixins: [utils],
  setup () {
    return {
      flipIndex: 0,
      flipText: ref(""),
      setIntervalFunc: null,
    };
  },
  components: {
    InjectTemplate
  },
  mounted() {
    if(this.$refs.animateDom){
      this.initFlip();
      if(!this.isH5Edit){
        this.startFlip();
      }
    }
    var item = this.lists[this.flipIndex];
    this.flipIndex++;
    this.flipText = item.prefix + item.text + item.suffix;
  },
  methods: {
    startFlip() {
      this.setIntervalFunc = window.setInterval(() => {
        this.addClass(this.$refs.animateDom, "animate__animated");
        this.addClass(this.$refs.animateDom, "animate__flipOutX");
      }, this.commonAttr.intervalTime);
    },
    initFlip() {
      if (this.lists.length <= 0) {
        return;
      }
      this.$el.removeEventListener("animationend", this.clearAnimates);
      this.$el.removeEventListener("webkitAnimationEnd", this.clearAnimates);
      this.$el.addEventListener("animationend", this.clearAnimates);
      this.$el.addEventListener("webkitAnimationEnd", this.clearAnimates);
    },
    clearAnimates() {
      this.removeClass(this.$refs.animateDom, "animate__animated");
      this.removeClass(this.$refs.animateDom, "animate__flipOutX");

      this.flipIndex++;
      this.flipIndex = this.flipIndex % this.lists.length;
      var item = this.lists[this.flipIndex];
      this.flipText = item.prefix + item.text + item.suffix;
    }
  },
  beforeUnmount(){
    window.clearInterval(this.setIntervalFunc)
  }
};
</script>
<style>
.wb-flip-mc {
  width: inherit;
  height: inherit;
}
</style>